<template>
	<view class="content">
		<!-- 统计图 -->
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar">
				<view class="qiun-title-dot-light margin-top" @click="startCalendar">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input text-blue">{{date}}<text class="cuIcon-unfold margin-left" /></view>
					</picker>
				</view>

			</view>
			<view class="qiun-charts">
				<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
			</view>
		</view>
		<!-- <统计图 -->
		<view class="cu-list menu bg-white sm-border margin-top-10">
			<navigator url="attendance-group/attendance-group" class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-settingsfill text-yellow"></text>
					<text class="text-grey">考勤组设置</text>
				</view>
			</navigator>
			<navigator url="monthly-statistics/monthly-statistics" class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-rankfill text-green"></text>
					<text class="text-grey">按月统计</text>
				</view>
			</navigator>
			<view v-show="departdata!=null&&departdata.length >0">
				<view class="bg-white padding justify-start">
					<view class="content" style="padding: 0upx 12upx 0upx 12upx;">
						<text class="cuIcon-group_fill text-green"></text>
						<text style="margin-left: 20upx;" class="text-grey">部门考勤</text>
					</view>
				</view>

				<view class="flex padding-item justify-between">
					<view>{{date}}</view>
					<view>出勤</view>
				</view>
			</view>

			<view @click="goDepartDetail" :data-id="item.unitno" :data-name="item.departname" v-for="(item,index) in departdata"
			 class="flex padding-item justify-between">
				<view class="progress-left">{{item.departname}}</view>
				<progress class="progress-box" :percent="`${item.yatt / item.sums * 100}`" active stroke-width="6" backgroundColor="#999" />
				<text class="progress-right">{{item.yatt}}/{{item.sums}}</text>
			</view>

		</view>

		<view style="height: 60upx;"></view>
	</view>


	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js';
	var _self;
	var globalData = null;
	var canvaRing = null;

	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			// year = year + 2;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				departdata: []
			}
		},
		onLoad() {
			_self = this;
			globalData = getApp().globalData
			_self.cWidth = uni.upx2px(750)
			_self.cHeight = uni.upx2px(500)
			_self.getDayAttendanceData()
			_self.getDepartAttendance()
		},
		onPullDownRefresh() {
			_self.getDayAttendanceData()
			_self.getDepartAttendance()
		},
		onShow() {
			this.getEmployee()
		},
		methods: {
			getEmployee() {
				uni.request({
					url: this.$constant.BASEURL + this.$constant.GET_EMPLOYEE_LIST_PAGE,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						username: globalData.username,
						unitnos: globalData.orgcode,
						token: globalData.token,
						page: 1,
						rows: 1
					},
					success: (res) => {
						let page = res.data.data
						if (typeof(page) == 'undefined') {
							this.showNoEmployee()
						}
					}

				});
			},
			showNoEmployee() {
				// console.log('showNoEmployee')
				uni.showModal({
					title: '提示',
					content: '检测到你还未添加员工，为了你的正常使用，请立刻前往添加',
					showCancel: true,
					success: (res) => {
						console.log(res)
						if (res.confirm) {
							uni.navigateTo({
								url: '../main/employee/addemployee'
							})
						}else{
							console.log("不录入");
						}
					}
				})
			},
			getDayAttendanceData() {
				uni.request({
					url: _self.$constant.BASEURL + _self.$constant.GET_ATTENDANCE_CHARTS_DAY,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						username: globalData.username,
						token: globalData.token,
						unitno: globalData.orgcode,
						createDate: _self.date
					},
					success: function(res) {
						console.log(res)
						var result = res.data.data
						// console.log(result)
						if (result == null || typeof(result) == 'undefined') return
						let Ring = {
							series: [{
									name: `出勤${result.attcount}人`,
									data: result.attcount,
									// format: function(val){return `${result.attcount}人`}
								}, {
									name: `迟到${result.late}人`,
									data: result.late
								},
								{
									name: `早退${result.leaveearly}人`,
									data: result.leaveearly
								},
								{
									name: `未打卡${result.persum - result.attcount}人`,
									data: result.persum - result.attcount
								}
							],
							title: `${result.persum == 0 ? '0':(result.attcount / result.persum * 100).toFixed(2)}` + '%'
						};
						_self.showRing("canvasRing", Ring);
					},
					complete() {
						uni.stopPullDownRefresh();
					},
					fail: () => {
						uni.showToast({
							title: "网络错误",
							icon: 'none'
						})
					},
				});
			},
			showRing(canvasId, chartData) {
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 12,
					legend: true,
					title: {
						name: chartData.title,
						color: '#7cb5ec',
						fontSize: 20 * _self.pixelRatio,
						// offsetY: -20 * _self.pixelRatio,
					},
					subtitle: {
						name: '出勤率',
						color: '#666666',
						fontSize: 14 * _self.pixelRatio,
						// offsetY: 30 * _self.pixelRatio,
					},
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 30 * _self.pixelRatio,
							labelWidth: 10
						}
					},
					colors: ['#5599ff', '#BDB76B', '#EEB422', '#f04864'],
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
				});
			},
			touchRing(e) {
				// console.log('11111111111111', e)
				canvaRing.showToolTip(e, {
					format: function(item) {
						uni.navigateTo({
							url: 'attendance-detail/attendance-detail?date=' + _self.date
						})
						// console.log('11111111111111',item)
						return item.name
					}
				});

			},
			startCalendar() {
				_self.$refs.calendar.open()
			},
			bindDateChange: function(e) {
				_self.date = e.target.value
				_self.getDayAttendanceData()
				_self.getDepartAttendance()
			},
			getDepartAttendance() {
				uni.request({
					url: _self.$constant.BASEURL + _self.$constant.GET_DEPART_ATTENDANCE,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						username: globalData.username,
						token: globalData.token,
						unitno: globalData.orgcode,
						createDate: _self.date
					},
					complete() {
						uni.stopPullDownRefresh();
					},
					success: function(res) {
						var result = res.data.data
						// console.log(res)
						_self.departdata = result
					},
					fail: () => {
						uni.showToast({
							title: "网络错误，小程序端请检查合法域名",
							icon: 'none'
						})
					},
				});
			},
			goDepartDetail(e) {
				let unitno = e.currentTarget.dataset.id;
				let name = e.currentTarget.dataset.name;
				console.log(unitno, name)
				uni.navigateTo({
					url: `attendance-detail/attendance-detail?date=${_self.date}&unitno=${unitno}&departname=${name}`
				})
			},
			changeBack: function(d) {
				console.log(d);
			}
		}
	}
</script>

<style>
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.progress-left {
		width: 180upx;
	}

	.progress-right {
		width: 120upx;
		text-align: right;
	}

	.progress-box {
		width: 38%;
	}

	.padding-item {
		padding: 15upx 48upx 15upx 48upx;
	}

	.margin-top-10 {
		margin-top: 10upx;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 100%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #5599ff;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.uni-panel-icon {
		margin-left: 15px;
		color: #999999;
		font-size: 14px;
		font-weight: normal;
		transform: rotate(0deg);
		transition-duration: 0s;
		transition-property: transform;
	}

	.uni-icon {
		font-family: uniicons;
		font-weight: normal;
	}
</style>
